<template lang="html">
    <div class="container" v-loading="loading">

      <div class="filter">
          <datePicker startEndTime @onFilter="onFilter" />
          <span>统计时间：{{statisTime}}</span>
      </div>

        <div class="summary">
            <div class="summary_item">
                <div class="summary_title">
                  <img src="../../assets/img/s1.png" alt="">
                  <span>销售业绩</span>
                </div>
                <div class="summary_content">
                    <div class="price">￥{{table.sumPrice}}</div>
                    <div class="growth_rate">
                      <p v-if="table.sumPriceGrowType == 0">持平</p>
                      <p v-if="table.sumPriceGrowType == -1">减少</p>
                      <p v-if="table.sumPriceGrowType == 1">增加</p>
                      <p>
                        <i v-if="table.sumPriceGrowType == 0" class="el-icon-minus"></i>
                        <img v-if="table.sumPriceGrowType == -1" src="../../assets/img/drop.png" alt="">
                        <img v-if="table.sumPriceGrowType == 1" src="../../assets/img/rise.png" alt="">
                        <span>{{table.sumPriceGrow}}%</span>
                      </p>
                    </div>
                </div>
            </div>
            <div class="summary_item">
                <div class="summary_title">
                  <img src="../../assets/img/s2.png" alt="">
                  <span>售出商品（件）</span>
                </div>
                <div class="summary_content">
                    <div class="price">{{table.orderCount}}</div>
                    <div class="growth_rate">
                      <p v-if="table.orderCountGrowType == 0">持平</p>
                      <p v-if="table.orderCountGrowType == -1">减少</p>
                      <p v-if="table.orderCountGrowType == 1">增加</p>
                      <p>
                        <i v-if="table.orderCountGrowType == 0" class="el-icon-minus"></i>
                        <img v-if="table.orderCountGrowType == -1" src="../../assets/img/drop.png" alt="">
                        <img v-if="table.orderCountGrowType == 1" src="../../assets/img/rise.png" alt="">
                        <span>{{table.orderCountGrow}}%</span>
                      </p>
                    </div>
                </div>
            </div>
            <div class="summary_item">
                <div class="summary_title">
                  <img src="../../assets/img/s3.png" alt="">
                  <span>客户数量</span>
                </div>
                <div class="summary_content">
                    <div class="price">{{table.memberCount}}</div>
                    <div class="growth_rate">
                      <p v-if="table.memberCountGrowType == 0">持平</p>
                      <p v-if="table.memberCountGrowType == -1">减少</p>
                      <p v-if="table.memberCountGrowType == 1">增加</p>
                      <p>
                        <i v-if="table.memberCountGrowType == 0" class="el-icon-minus"></i>
                        <img v-if="table.memberCountGrowType == -1" src="../../assets/img/drop.png" alt="">
                        <img v-if="table.memberCountGrowType == 1" src="../../assets/img/rise.png" alt="">
                        <span>{{table.memberCountGrow}}%</span>
                      </p>
                    </div>
                </div>
            </div>
        </div>


        <div class="search">
            <el-form :inline="true" class="demo-form-inline">
                <el-form-item>
                  <el-input class="form_input" v-model="searchText" placeholder="请输入店铺名称"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" :disabled="loading" size="small" @click="onSubmit">搜索</el-button>
                </el-form-item>
                <el-form-item>
                    <el-select v-model="searchSelectValue" @change="onSubmit" placeholder="请选择">
                      <el-option label="全部" value=""></el-option>
                      <el-option label="客户" value="1"></el-option>
                      <el-option label="员工" value="2"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </div>

        <div class="tables">
          <el-table :data="tableData" border :header-cell-style="{background:'#f5f5f5',color:'#666'}" style="width: 100%">
                <el-table-column type="selection" width="40"></el-table-column>
                <el-table-column prop="userName" label="客户姓名" align="center"></el-table-column>
                <el-table-column prop="phone" label="客户手机号" align="center"></el-table-column>
                <el-table-column label="客户类型" align="center">
                  <template slot-scope="scope">
                    <p v-if="scope.row.type==1">客户</p>
                    <p v-if="scope.row.type==2">员工</p>
                  </template>
                </el-table-column>
                <el-table-column prop="firstOrderTime" :formatter="formatTime" label="首次购买日期" align="center"></el-table-column>
                <el-table-column prop="orderCount" label="购买数量" align="center"></el-table-column>
                <el-table-column prop="sumSuccessPrice" label="消费金额" align="center"></el-table-column>
                <el-table-column prop="sumRealPrice" label="结算金额" align="center"></el-table-column>
          </el-table>
          <pagination @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange" :currentPage="currentPage" :totalPage="total" />
        </div>



    </div>
</template>

<script>
export default {
  data(){
    return {
      loading: false,
      searchText: '',
      statisTime: '',
      year: '',
      month: '',
      day: '',
      date: [],
      currentPage: 1,
      totalPage: 0,
      pageSize: 10,
      tableData: [],
      table:{},
      searchSelectValue: '',
    }
  },
  computed:{
    queryId: function () {
      return this.$route.query.id
    }
  },
  created(){
    this.selectMemberPage();
  },
  methods:{
    selectMemberPage(){
      this.loading = true;
      this.$http.selectMemberPage({
        id: this.queryId,
        query: this.searchText,
        startTime: (this.date&&this.date[0]) || '',
        endTime: (this.date&&this.date[1]) || '',
        dayTime: this.day,
        monthTime: this.month,
        yearTime: this.year,
        type: this.searchSelectValue,
        pageSize: this.pageSize,
        pageNumber: this.currentPage
      }).then(res=>{
        this.loading = false;
        if(res.data.code == 0){
          this.table = res.data.data;
          this.tableData = res.data.data.pageInfo.rows;
          this.totalPage = res.data.data.pageInfo.totalPage;
          this.pageSize = res.data.data.pageInfo.pageSize;
        }else{
          this.$message.error(res.data.message);
        }
      });
    },
    onFilter(e){
      this.statisTime = e.val;
      this.date = [];
      this.year = '';
      this.month = '';
      this.day = '';
      switch (e.key) {
        case 1: this.day = e.val; break;
        case 2: this.month = e.val; break;
        case 3: this.year = e.val; break;
        case 4:
          this.date = [...e.val];
          if(e.val[0]) this.statisTime = `${e.val[0]} - ${e.val[1]}`;
          else this.statisTime = '';
        break;
      }
      this.onSubmit()
    },
    onSubmit(){
      this.handleCurrentChange(1);
    },
    handleSizeChange(e){
      this.pageSize = e;
      this.handleCurrentChange(1);
    },
    handleCurrentChange(e){
      this.currentPage = e;
      this.selectMemberPage();
    },
    formatTime(row){
      let time = new Date(row.firstOrderTime);
      if(time == 'Invalid Date'){
        return '';
      }
      return time.getFullYear()+'-'+(time.getMonth()+1)+'-'+time.getDate()+' '+time.getHours()+':'+time.getMinutes();
    }


  }

}
</script>

<style lang="css" scoped>

.summary{
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.summary .summary_item{
  width: 32%;
  background-color: #fff;
  box-sizing: border-box;
  padding: 25px 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}
.summary_title{
  line-height: 32px;
  font-size: 16px;
}
.summary_content{
  display: flex;
  justify-content: space-between;
  padding-top: 20px
}
.summary_content .price{
  font-size: 32px;
}
.summary_content .growth_rate{
  text-align:  center;
  font-size: 14px;
}
.el-icon-minus{color: #4196ff}
/deep/.el-table .row_style{
  background-color: #f8f8f8 !important;
}
.active{
  color: #FFF;
  background-color: #409EFF;
  border-color: #409EFF;
}
.filter{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
</style>
